<template>
  <div class="app batteryDoor">
    <div class="battlubfImg">
      <img
        src="https://img2.tuhu.org/WebActive/Image/FlKR4oGUeofFfzxj6FH8cAvB-fAt_w960_h380.png"
        alt
      />
      <img
        src="https://img2.tuhu.org/WebActive/Image/Fug0fyj3duNGw1TFd1MGoacLwTmR_w960_h380.png"
        alt
        srcset
      />
    </div>
    <div class="AreaSelection cont1200">
        <div> <goodlist></goodlist> </div>
      <div class="area">
        <h2>请填写详细地址</h2>
        <el-cascader
          class="areaItem1"
          size="large"
          :options="options"
          v-model="selectedOptions"
          @change="addressChange"
        ></el-cascader>
        <el-input class="areaItem2" v-model="inputResID" placeholder="请输入精准地址"></el-input>
        <p>您输入的地址为：{{ resID }}{{inputResID}}</p>
      </div>

     <div>
       <el-button class="nextto">下一步</el-button>
     </div>
      <div class="purchaseNotes">
        <h4>蓄电池购物须知：</h4>
        <h5>服务说明</h5>
        <p>途虎蓄电池从安装之日起开始计算质保。营运车辆，因需要频繁启动，故会直接影响到蓄电池的使用寿命与主功能，即只承担6个月质保（如教练车、出租车、网约车等）；</p>
        <p>途虎所售电瓶，均须回收旧电瓶。如您需要保留旧电瓶或无旧电瓶需现场按照2元/安时支付费用，譬如60安时支付120元；</p>
        <p>顾客采购商品后，服务人员按预约时间送达指定地点后，由于顾客原因取消或退货的，由顾客承担配送服务成本100元/次；</p>
        <h5 class="subheading">以下情况不可退换货</h5>
        <ol>
          <li>已经被使用的（非产品质量问题）；</li>
          <li>因客户使用不当或车身有漏电现象导致蓄电池断电的；</li>
          <li>未安装但撕毁防伪标识或客户原因造成损坏的；</li>
          <li>用户在搬运电池过程中摔坏磕碰导致电池报废；</li>
          <li>由于不正确的充电、安装及碰撞等引起的问题；</li>
        </ol>
        <h5 class="subheading">以下情况不可退换货</h5>
        <ol>
          <li>已经被使用的（非产品质量问题）；</li>
          <li>因客户使用不当或车身有漏电现象导致蓄电池断电的；</li>
          <li>未安装但撕毁防伪标识或客户原因造成损坏的；</li>
          <li>用户在搬运电池过程中摔坏磕碰导致电池报废；</li>
          <li>由于不正确的充电、安装及碰撞等引起的问题；</li>
        </ol>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import {
  provinceAndCityData,
  regionData,
  provinceAndCityDataPlus,
  regionDataPlus,
  CodeToText,
  TextToCode
} from "element-china-area-data";
import goodlist from "../ListGoods/ListGoods"
export default {
  data() {
    return {
      options: regionData,
      selectedOptions: [],
      resID: "",
      inputResID: "",
      value: "",
      areajson: []
    };
  },
  methods: {
    addressChange(arr) {
      console.log(arr);
      this.resID = CodeToText[arr[0]] + CodeToText[arr[1]] + CodeToText[arr[2]];
      console.log(CodeToText[arr[0]], CodeToText[arr[1]], CodeToText[arr[2]]);
    }
  },
  components: {goodlist}
};
</script>

<style lang="scss" type="text/css" scoped>
@import "../../common/style.scss";
.batteryDoor {
  .battlubfImg {
    height: 380px;
    img {
      float: left;
      width: 50%;
    }
    img:nth-of-type(2) {
      margin-top: -11px;
    }
  }
  .AreaSelection {
    margin-top: 20px;
    border-top: 5px $main-color12 solid;

    .AccordingToModels {
      position: relative;
      text-align: center;
      background-color: antiquewhite;
      height: 70px;
      img {
        padding: 10px;
        height: 50px;
      }
      div {
        position: absolute;
        top: -4px;
        left: 642px;
      }
      span {
        line-height: 80px;
        height: 10px;
        width: 20px;
      }
    }
    .area {
      background-color: antiquewhite;
      padding: 5px 50px;
      .areaItem2 {
        width: 350px;
      }
    }
    .purchaseNotes {
      background-color: rgb(235, 235, 235);
      padding: 50px;
      color: rgb(90, 90, 90);
      h4 {
        margin: 10px 0px;
      }
      h5 {
        margin: 5px 0px;
      }
      .subheading {
        // margin-left: -10px;
      }
      li,
      p {
        font-size: 15px;
        margin: 8px 10px;
      }
    }
  }
  .nextto{
    height:50px;width:200px;
  }
}
</style>
